<template>
  <a-card class="h-100">
    <template #title>
      {{isEdit ? '修改菜单' : '添加菜单'}}
    </template>
    <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="菜单名称" name="name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="菜单路径" name="href">
        <a-input v-model:value="formState.href" />
      </a-form-item>
      <a-form-item label="上级菜单" name="parentId">
        <a-select v-model:value="formState.parentId" placeholder="please select your parentId">
          <a-select-option :value="-1">没有上级菜单</a-select-option>
          <template v-for="item in parentMenuList" :key="item.id">
            <a-select-option  :value="item.id">{{item.name}}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="描述" name="description">
        <a-textarea v-model:value="formState.description" />
      </a-form-item>
      <a-form-item label="前端图标" name="icon">
        <a-input v-model:value="formState.icon" />
      </a-form-item>
      <a-form-item label="是否显示" name="shown">
        <a-radio-group v-model:value="formState.shown">
          <a-radio :value="true">显示</a-radio>
          <a-radio :value="false">隐藏</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="排序" name="orderNum">
        <a-input-number v-model:value="formState.orderNum" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
import { saveOrUpdate, getRootMenu } from '@/services/menu'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'

export default defineComponent({
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  async setup () {
    const router = useRouter()
    const route = useRoute()
    const parentMenuList = ref([])
    // 表单相关参数或变量
    const formRef = ref()
    let formState = reactive({
      name: '123',
      href: '123a',
      parentId: -1, // -1 表示没有上级菜单
      description: 'asdqwe',
      icon: 'asd',
      shown: false,
      orderNum: null
    })
    const rules = {
      name: [{ required: true, message: 'Please input name', trigger: 'blur' }],
      href: [{ required: true, message: 'Please input href', trigger: 'change' }],
      parentId: [{ required: true, message: 'Please pick a parentId', trigger: 'change', type: 'number' }]
    }
    // 获取上级菜单列表 or 获取编辑菜单详情
    const { data } = await getRootMenu(route.params.id as string || -1)
    if (data.code === '000000') {
      parentMenuList.value = data.data.parentMenuList
    }
    if (data.data.menuInfo) {
      formState = reactive(data.data.menuInfo)
    }
    // 提交表单
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(async () => {
          const { data } = await saveOrUpdate(formState)
          if (data.code === '000000') {
            message.success('提交成功')
            router.back()
          }
        })
        .catch((error: ValidateErrorEntity) => {
          console.log('error', error)
        })
    }
    // 重置表单
    const resetForm = () => {
      formRef.value.resetFields()
    }
    return {
      parentMenuList,
      formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      formState,
      rules,
      onSubmit,
      resetForm
    }
  }
})
</script>
<style lang="scss" scoped>
</style>
